<template>
  <el-card>
    <div class="btn">
      <el-card class="search-condition-card">
        <el-form v-model="searchForm" ref="searchFormRef" label-width="4vw">
          <!-- 这里可以根据实际需求添加各种搜索条件输入框，以下只是示例 -->
          <el-form-item label="视频标题">
            <el-input
              v-model.trim="searchForm.title"
              placeholder="请输入视频标题"
            ></el-input>
          </el-form-item>
          <el-form-item label="发布时间">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-button type="primary" @click="(dialogVisible = true), (isAdd = true)"
        ><i class="el-icon-plus"></i> 新增</el-button
      >
      <el-button
        type="success"
        :disabled="
          multipleSelection.length == 0 || multipleSelection.length > 1
        "
        @click="handleUser"
        ><i class="el-icon-edit"></i> 修改</el-button
      >
      <el-button type="danger" :disabled="multipleSelection.length == 0" @click="deleteVideo"
        ><i class="el-icon-delete"></i> 删除</el-button
      >
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" width="50" label="编号"> </el-table-column>
      <el-table-column prop="videoTitle" label="视频标题"> </el-table-column>
      <el-table-column prop="issueTime" label="发布时间"> </el-table-column>
      <el-table-column prop="videoLikeNumber" label="点赞数"> </el-table-column>
      <el-table-column prop="videoLoveNumber" label="收藏数"> </el-table-column>
      <el-table-column prop="videoLookNumber" label="浏览量"> </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-dialog
      title="新增视频"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="视频标题" prop="videoTitle">
          <el-input v-model="form.videoTitle"></el-input>
        </el-form-item>
      </el-form>
      <ui-video
        :existingVideo.sync="form.file"
        @getUrl="getUrl"
      ></ui-video>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addVideo">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改视频"
      :visible.sync="dialogVisible2"
      width="70%"
      :before-close="handleClose"
    >
      <el-form :model="changeForm" :rules="rules" ref="changeForm">
        <el-form-item label="视频标题" prop="videoTitle">
          <el-input v-model="changeForm.videoTitle"></el-input>
        </el-form-item>
      </el-form>
      <ui-video
        :existingVideo.sync="changeForm.file"
        @getUrl="ChangeUrl"
      ></ui-video>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="changeVideo">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { addVideo, changeVideo, deleteVideo, getVideo } from '@/api/video'
import uiVideo from '@/components/ui-video.vue'
import { GMTToStr } from '@/utils/GMTToStr'

export default {
  components: { uiVideo },
  data () {
    return {
      total: 1,
      page: 1,
      pageSize: 10,
      currentPage4: 1,
      dialogVisible: false,
      dialogVisible2: false,
      isAdd: true,
      tableData: [],
      multipleSelection: [],
      form: {
        videoTitle: '',
        file: ''
      },
      changeForm: {
        id: '',
        videoTitle: '',
        file: ''
      },
      rules: {
        videoTitle: [
          { required: true, message: '请输入视频标题', trigger: true },
          { min: 1, max: 20, message: '最大可输入20字', trigger: true }
        ]
      },
      searchForm: {
        title: '',
        begin: '',
        end: ''
      },
      dateRange: ''
    }
  },
  methods: {
    handleSizeChange (val) {
      this.pageSize = val
      this.getVideo()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getVideo()
    },
    getVideo () {
      getVideo(this.page, this.pageSize, this.searchForm.title, this.searchForm.begin, this.searchForm.end).then((data) => {
        console.log(data)
        this.tableData = data.data.rows
        this.total = data.data.total

        this.tableData.forEach(item => {
          item.issueTime = item.issueTime.replace('T', ' ')
        })
      })
    },
    handleSelectionChange (val) {
      console.log(val)
      this.multipleSelection = val
    },
    handleUser () {
      const selectedVideo = JSON.parse(JSON.stringify(this.multipleSelection[0]))
      this.changeForm.id = selectedVideo.id
      this.changeForm.file = selectedVideo.file.startsWith('http')
        ? selectedVideo.file
        : process.env.VUE_APP_BASE_API + selectedVideo.file
      this.changeForm.videoTitle = selectedVideo.videoTitle
      this.dialogVisible2 = true
      this.isAdd = false
      console.log('当前视频URL:', this.changeForm.file)
    },
    addVideo () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          addVideo(this.form).then((data) => {
            this.form.videoTitle = ''
            this.form.file = ''
            console.log(data)
            this.dialogVisible = false
            this.getVideo()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    changeVideo () {
      this.$refs.changeForm.validate((valid) => {
        if (valid) {
          changeVideo(this.changeForm).then(data => {
            if (data.code === 1) {
              this.$message.success('修改成功')
              this.getVideo()
              this.dialogVisible2 = false
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClose () {
      this.$confirm('关闭对话框，新增内容将消失', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (this.isAdd) {
            this.form.videoTitle = ''
            this.dialogVisible = false
          } else {
            this.dialogVisible2 = false
          }
        })
        .catch(() => {})
    },
    getUrl (url) {
      this.form.file = url
    },
    ChangeUrl (url) {
      this.changeForm.file = url
    },
    deleteVideo () {
      const idList = this.multipleSelection.map((data) => {
        return data.id
      })
      deleteVideo(idList).then(data => {
        if (data.code === 1) {
          this.getVideo()
          this.$message.success('删除成功')
        }
      })
    },
    handleSearch () {
      // 在这里可以进行搜索逻辑处理，比如发送请求等
      // 此处先简单打印出搜索条件表单数据示例
      if (this.dateRange !== '' && this.dateRange !== null) {
        const timeArr = []
        // this.dateRange是获取到的组件选择的时间区间，获取方法这里就不说了
        for (let i = 0; i < this.dateRange.length; i++) {
          timeArr.push(GMTToStr(this.dateRange[i]))
        }
        this.searchForm.begin = timeArr[0]
        this.searchForm.end = timeArr[1]
      }
      this.getVideo()
      this.searchForm.begin = ''
      this.searchForm.end = ''
    }
  },
  created () {
    this.getVideo()
  }
}
</script>

<style scoped>
.search-condition-card .el-form {
  display: flex;
  flex-wrap: wrap;
}

.search-condition-card {
  margin-bottom: 1vw;
  display: flex;
}

.search-condition-card  .el-form-item{
  width: 20vw;
  margin: 0;
}
</style>
